<template>
      <div class="weather">
            <img class="tianqi" src="../../assets/tianqi.png" alt="#">
            <span v-if="infos.city">{{ infos.city }}</span>
            <span v-if="infos.city">{{ infos.info.week }}</span>
            <span v-if="infos.city">{{ infos.info.low }}~{{ infos.info.high }}</span> 
      </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Page401',
  data() {
    return {
        infos:{

        }
    }
  },
  mounted(){
   this.getWeather()
  },
  methods: {
    async getWeather() {
			let { data: res } = await axios.get('https://api.vvhan.com/api/weather')
			// console.log(res)
			if (!res.success) return
			this.infos = res
	 },
  }
}
</script>
<style lang="less" scoped>
  .weather{
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap:10px;
    font-weight: 600;
    .tianqi{
        width: 30px;
    }
  }
</style>